<template>
  <div>
    <Row>
      <Col span="12">
        <Table :columns="columns" :data="data" border />
      </Col>
    </Row>
  </div>
</template>
<script>
export default {
  name: 'table-colspan',
  data () {
    return {
      columns: [
        {
          type: 'index',
          title: '序号',
          width: 80
        },
        {
          key: '',
          title: '基本信息',
          align: 'center',
          children: [
            {
              key: 'name',
              title: '姓名',
              minWidth: 160
            },
            {
              key: 'className',
              title: '班级',
              minWidth: 160
            },
            {
              key: 'studentNo',
              title: '学号',
              width: 160
            }
          ]
        },

        {
          title: 'Action',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                },
                '查看'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      data: []
    }
  },
  methods: {
    init () {
      this.getDataList()
    },
    show (index) {
      this.$Modal.info({
        title: '学生基本信息',
        content: `姓名：${this.data[index].name}<br>班级：${this.data[index].className}<br>学号：${this.data[index].studentNo}`
      })
    },
    remove (index) {
      this.data.splice(index, 1)
    },
    getDataList () {
      this.data = new Array(30).fill({
        className: '一年级1班',
        name: '张三',
        studentNo: '2019136521521'
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>
